<template>
  <div>
      <a-modal
      :open="open"
      :body-style="bodyStyleModal"
      :width="1000"
      :footer="null"
      :closable="false"
      style="top:10px"
      @cancel="onclose"
      >
<!--          <div style="display: grid;gap: 10px">-->
<!--              <p class="confirmText">是否确认关机</p>-->
<!--              <div style="display: flex;justify-content: center;gap:35px">-->
<!--                  <confirm-button @click="confirmShutdown" style="background-color: red">是</confirm-button>-->
<!--                  <back-button @click="onclose"></back-button>-->
<!--              </div>-->
<!--          </div>-->
          <div style="display: flex;justify-content: center;align-items: center;gap: 70px">
              <img class="button" src="../assets/version2.0/关机.png" alt="" @click="confirmShutdown">
              <img class="button" src="../assets/version2.0/取消.png" alt="" @click="onclose">
          </div>


      </a-modal>
  </div>
</template>

<script>
import axios from "axios";
import API_BASE_URL from "../../config.js";
import ConfirmButton from "@/components/ConfirmButton.vue";
import BackButton from "@/components/BackButton.vue";

export default {
    name: "shutdownConfirmModal",
    components: {
        // BackButton, ConfirmButton
    },
    data(){
        return{
            open:false,
            bodyStyleModal: ['margin:-20px -24px', 'height:566px','display: flex','justify-content: center','align-items: center'],
            url:{
                shutdown: `${API_BASE_URL}/shut-down`
            }
        }
    },
    methods:{
        confirmShutdown(){
            axios({
                url:this.url.shutdown,
                method:'get'
            })
        },
        onclose(){
            this.open = false
        }
    }
}
</script>

<style scoped>
.confirmText{
    font-size: 25px;
    text-align: center;
    margin: 20px;
}
.button{
    width: 80px;
}

</style>